
import React, { useCallback, useEffect, useState } from "react";
import {Button, Menu,Row,Col,Badge,Checkbox, Form, Input, message} from 'antd';
import { LockOutlined, UserOutlined,HomeOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
import loginCss from '../modlue.css/Login.module.css'
// console.log('loginCss',loginCss);
import {useStorage} from '../utils/hooks'
// import {useDispatch} from 'react-redux'





// import '../App.scss'



import 'antd/dist/antd.css';
import { request } from "../utils";











function Login(){
    // const [userInfo,setUserInfo] = useStorage('userInfo')
    
    
    const [useInfo,setUserInfo] = useStorage('userInfo')
    const navigate = useNavigate()
    const [SearchParams] = useSearchParams()
    // const dispatch = useDispatch()



    const onFinish = useCallback((values) => {
        async function userData(){
            console.log(values);
            const {data} = await request.get('/user/login',{
                params:{
                    username:values.username,
                    password:values.password
                }     
            })

            if(data.code === 200){
                //获取？后面的信息
                const url = SearchParams.get('target') || '/home'
                //登陆成功，存储用户信息
                setUserInfo(data.data)
                navigate(url)
                
            }else if(data.code === 400){
                
            }
        }
        
        userData()
      },[]);

    
    return(
        <>
        <header style={{width: 1200,height: 92,margin:'0 auto'}}>
            <Row>
                <Col span={8}>
                    <div className={loginCss.content}>
                        <a href="#">
                            <img src="/img/logo.login.png" alt="PosPal 银豹收银系统" />
                        </a>
                        <span style={{fontSize:'24px',color:'#666'}}>欢迎登录</span>
                    </div>

                </Col>
                <Col span={16} style={{textAlign:'right'}}>
                    <div className={loginCss.menu} >
                        
                            <span>客服热线：400-806-6866</span>
                            <span><a href="#" >企业QQ：800008626  </a></span>
                            <span><a href="#">下载中心</a></span>
                            <span><a href="#">帮助中心</a></span>

                    </div>
                </Col>
                
                
            </Row>

  
        </header>
        <main>
            <div className={loginCss.area}>
                <img className={loginCss.login_img} src="/img/login-bg1.jpg"/>
                <div className={loginCss.loginbox} style={{width:'320px',height:'420px'}}>
                    <h1>账号登录</h1>
                    
                    
                    <div style={{paddingTop:20}}>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            >

             

                            <Form.Item
                                name="username"
                                rules={[
                                {
                                    required: true,
                                    message: '请输入您的用户名!',
                                },
                                ]}
                            >
                                <Input className={loginCss.input_size} prefix={<HomeOutlined className="site-form-item-icon" />} placeholder="请输入账号" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                {
                                    required: true,
                                    message: '请输入您的密码!',
                                },
                                ]}
                            >
                                <Input
                                className={loginCss.input_size}
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="请输入密码"
                                />
                            </Form.Item>
                            
                            

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className={loginCss.login_form_button}>
                                登录
                                </Button>
                            </Form.Item>

                            <Form.Item>
                                <Row>
                                <Col span={6}>
                                    <Button type='link'><Link to='/login1'>工号登录</Link></Button>
                                </Col>
                                <Col span={18} style={{textAlign:'right'}}>
                                    <Button type='link' style={{textAlign:'right'}}><Link to='' style={{color:'#999'}}>忘记密码？</Link></Button>
                                </Col>
                                </Row>    
                            </Form.Item>
                            
                            

                        
                            
                            
                        </Form>
                        
                       

                            
                        
                      
                        <div className={loginCss.item_registbox}>
                            <span style={{color:'#777'}}>没有账号?</span>
                            <Button type="primary" danger><Link to='/reg'>免费注册</Link></Button>
                        </div>
                    </div>
                  





                </div>
            </div>
          
        </main>
        <footer style={{width: 1200,margin:'0 auto'}}>
            <div className={loginCss.dibu}>
                <Row>
                    <Col span={12} offset={7}>
                        <div className={loginCss.ula}>
                            <a href="#">版本更新</a>
                            <a href="#">支持社区</a>
                            <a href="#">银豹博客</a>
                            <a href="#">渠道合作</a>
                            <a href="#">开放平台</a>
                            <a href="#">关于我们</a>
                            <a href="#" style={{borderRight:'none'}}>联系我们</a>
                        </div>
                    </Col>
                </Row>
            
           
            <p className={loginCss.ftp}>2010-2017 © Copyright. Zhundong Network - All Rights Reserved</p>

            </div>
           
        </footer>
        </>
        
    )
}

export default Login;